<script lang="ts" setup>
import { getInfo, editUser, putAvatar } from "@/api";
import { useTokenStore } from "@/store";
import { ElNotification } from "element-plus";
interface IUser {
  username: string;
  password: string;
  email: string;
  gender: "男" | "女" | "保密";
  registrationTime: string;
  avatar: string;
}
const userInfo = ref<IUser>({
  username: "",
  password: "",
  email: "",
  gender: "保密",
  registrationTime: "",
  avatar: "",
});
const file = ref<HTMLInputElement>();
const uploadAvatar = () => {
  file.value!.click();
};
const store = useTokenStore();
const load = async () => {
  const info = await getInfo();
  console.log(info);
  const { data } = info;
  // info.data = userInfo.value;
  userInfo.value = data;
  console.log(userInfo.value);
};
onMounted(async () => {
  // const info = await getInfo();
  // console.log(info);
  // const { data } = info;
  // // info.data = userInfo.value;
  // userInfo.value = data;
  await load();
  console.log(userInfo.value);
  file.value?.addEventListener("change", (e) => {
    if ((e.target! as HTMLInputElement).files![0]) {
      console.log((e.target! as HTMLInputElement).files![0]);
      file2.value = (e.target! as HTMLInputElement).files![0];
      updateAvatar();
    } else {
      ElMessage({
        message: "请选择头像",
      });
    }
  });
});
const file2 = ref<File>();
const updateAvatar = async () => {
  try {
    const { data } = await putAvatar(file2.value!);
    const store = useTokenStore();
    store.setToken(data);
    await load();
    // userInfo.value = data;
    // console.log(userInfo.value)
    ElMessage("上传成功 !!!");
  } catch (e) {
    ElMessage("上传失败 !!!");
  }
};
const edit = async () => {
  try {
    const resp = await editUser(userInfo.value);
    const { data } = resp;
    if (data) {
      store.setToken(data);
      console.log(resp);
      ElMessage({
        message: "修改成功",
        type: "success",
      });
    }
    await load();
  } catch (e) {
    console.log(e);
    ElMessage({
      message: "修改失败",
      type: "error",
    });
  }
};
</script>
<template>
  <el-card style="width: 480px; min-height: 480px" shadow="always">
    <template #header> 个人资料 </template>
    <template #default>
      <div>
        <div>
          <el-avatar :size="50" :src="userInfo.avatar" @click="uploadAvatar" />
          <input
            type="file"
            name="file"
            style="display: none"
            ref="file"
            accept="image/*"
          />
        </div>
        <el-form
          :model="userInfo"
          label-width="auto"
          style="max-width: 600px"
          @submit.prevent="edit"
        >
          <el-form-item label="用户名">
            <el-input v-model="userInfo.username" />
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="userInfo.password" />
          </el-form-item>
          <el-form-item label="邮箱地址">
            <el-input v-model="userInfo.email" disabled />
          </el-form-item>
          <el-form-item label="性别">
            <!-- <el-input v-model="userInfo.username"/> -->
            <el-select
              v-model="userInfo.gender"
              placeholder="Select"
              style="width: 240px"
            >
              <el-option
                v-for="item in ['男', '女', '保密']"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="注册时间">
            <el-input v-model="userInfo.registrationTime" disabled />
          </el-form-item>
          <el-form-item>
            <el-button native-type="submit"> 修改 </el-button>
          </el-form-item>
        </el-form>
      </div>
    </template>
  </el-card>
</template>
<style lang="scss" scoped></style>
